<script lang="ts">
    import { Avatar } from "../Avatar";
    import { Tooltip } from "../Tooltip";
    import { useClassList } from "../utils/useClassList";
    import type { AvatarListProps } from "./AvatarList";

    const props: AvatarListProps = $props();

    const classList = $derived(
        useClassList(props, "cm-avatar-list", {
            [`cm-avatar-list-${props.size}`]: props.size,
        }),
    );

    const max = $derived(props.max ?? Number.MAX_VALUE);
    const gutter = $derived((props.gutter ?? (props.size === "small" ? -8 : -12)) + "px");
</script>

<div class={classList} style={props.style}>
    {#each props.data as item, index}
        {#if index < max}
            <div class="cm-avatar-list-item" style={`margin-left: ${index > 0 ? gutter : 0}`}>
                <Tooltip align={props.align || "top"} content={item.title}>
                    <Avatar {...item} size={props.size} />
                </Tooltip>
            </div>
        {/if}
    {/each}
    {#if props.data.length > max}
        <div class="cm-avatar-list-item" style={`margin-left: ${gutter}`}>
            <Avatar size={props.size} style={props.excessStyle}>+{props.data.length - max}</Avatar>
        </div>
    {/if}
</div>
